﻿{{#each this}}
<div class="row">
    <div class="pull-left">
        <h3>Detailed View <a> {{desc}}</a> in {{city}}</h3>
    </div>
    <div class="pull-right">        
        <a id="btnBackToSerchVIew" href="#search?item/{{prodName}}" class="btn btn-info">
            <span class="glyphicon glyphicon-arrow-left"></span> Back
        </a>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#prod-info" data-toggle="tab">Product Info</a></li>
            <li><a href="#retailer-info" data-toggle="tab">Seller Info</a></li>
            <li><a href="#more-info" data-toggle="tab">More</a></li>
        </ul>
    </div>
    <div class="col-xs-12" style="margin-top:10px">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="prod-info">
                <div class="alert alert-info" role="alert">Product Information</div>
                <div class="col-sm-8">          
                    <div class="form-group">
                        <strong>Brand Name :</strong>
                        <span>{{brandName}}</span>
                    </div>                               
                    <div class="form-group">
                        <strong>Product Name :</strong>
                        <span>{{prodName}}</span>
                    </div>                                          
                    <div class="form-group">
                        <strong>Product Description:</strong>
                        <span>{{desc}} INR</span>
                    </div>   
                    <div class="form-group">
                        <strong>Original Price :</strong>
                        <span>{{price}} INR</span>
                    </div>
                    <div class="form-group">
                        <strong>Our Offer Price :</strong>
                        <span style="color:#46b3ea">{{offerPrice}} INR</span>
                    </div>                
                </div>
                <div class="col-sm-4">
                    <img src="img/products-images/tumbnailImg/iPhone6.png" height="100px" width="200px">
                </div>                
            </div>
            <div class="tab-pane fade" id="retailer-info">
                <div class="alert alert-info" role="alert">Seller Information</div>
                <div class="col-sm-8">
                    <div class="form-group">
                        <strong>Seller Name :</strong>
                        <span>{{sellerName}}</span>
                    </div>
                    <div class="form-group">
                        <strong>Market Tag Line :</strong>
                        <span>{{info}}</span>
                    </div>
                    <div class="form-group">
                        <strong>Seller Located in :</strong>
                        <span>{{addr}}</span>
                    </div>
                    <div class="form-group">
                        <strong>Contact No :</strong>
                        <span>{{contactNo}}</span>
                    </div>
                    <div class="form-group">
                        <strong>Offer Type :</strong>
                        <span>{{type}}</span>
                    </div>               
                    <div class="form-group">
                        <strong>Offer Description :</strong>
                        <span>{{offerDesc}}</span>
                    </div>  
                    <div class="form-group">
                        <strong>City Name :</strong>
                        <span>{{city}}</span>
                    </div>
                </div>
                <div class="col-sm-4">
                    <img src="img/products-images/tumbnailImg/iPhone6.png" height="100px" width="200px">
                </div>
            </div>
            <div class="tab-pane fade" id="more-info">
                <div class="alert alert-info" role="alert">More Information</div>
                <div class="col-sm-8">
                    <p>More information yet be come</p>
                </div>
                <div class="col-sm-4">
                    <img src="img/products-images/tumbnailImg/iPhone6.png" height="100px" width="200px">
                </div>
            </div>
        </div>
     </div>    
</div>
{{/each}}